<template>
  <el-dialog :close-on-click-modal="false" :visible.sync="visible" :title="title" width="600px">
    <el-form ref="form" label-width="120px" :rules="rules" size="small">
      <el-form-item prop="showName" label="字段名称">
        {{column.showName}}
      </el-form-item>
      <el-form-item label="对应的部门字段">
        <el-input v-model="column.deptId" placeholder="请输入字段名"/>
      </el-form-item>
      <el-form-item v-if="column.fieldType === Object.keys(columnTypeList)[5]" label="对应的岗位字段">
        <el-input v-model="column.positionId" placeholder="请输入字段名"/>
      </el-form-item>
      <el-form-item v-if="column.fieldType === Object.keys(columnTypeList)[6]" label="对应的人员字段">
        <el-input v-model="column.userId" placeholder="请输入字段名"/>
      </el-form-item>
      <div style="margin-top: 20px; text-align: center;">
        <el-button class="filter-item" type="primary" title="保存" @click="handleSave">保存</el-button>
        <el-button class="filter-item" type="primary" plain title="取消" @click="visible=false">取消</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>

import draggable from 'vuedraggable'
import enums from '@/utils/enums'

export default {
  components: { draggable },
  data() {
    return {
      visible: false,
      column: {
        showName: '',
        deptId: '',
        positionId: '',
        userId: ''
      },
      title: '设置字段详情',
      index: undefined,
      rules: {}
    }
  },
  computed: {
    columnTypeList() {
      return enums.COLUMN_TYPE
    },
  },
  created() {
    
  },
  methods: {
    show(column, index) {
      this.index = index
      column.deptId = column.deptId || ''
      debugger
      if (column.fieldType === Object.keys(this.columnTypeList)[5]) {
        column.positionId = column.positionId || ''
        this.title = '设置部门、岗位对应字段'
      } else if (column.fieldType === Object.keys(this.columnTypeList)[5]) {
        column.userId = column.userId || ''
        this.title = '设置部门、人员对应字段'
      }
      this.column = JSON.parse(JSON.stringify(column))
      this.visible = true
    },
    handleSave() {
      this.visible = false
      this.$emit('setFieldCallBack', this.column, this.index)
    }
  }
}
</script>

<style lang="scss" scoped>
  .select-item {
    display: flex;
    border: 1px dashed #fff;
    box-sizing: border-box;
    & .close-btn {
      cursor: pointer;
      color: #f56c6c;
    }
    & .el-input + .el-input {
      margin-left: 4px;
    }
  }
  .select-item + .select-item {
    margin-top: 4px;
  }
  .select-item.sortable-chosen {
    border: 1px dashed #409eff;
  }
  .select-line-icon {
    line-height: 32px;
    font-size: 22px;
    padding: 0 4px;
    color: #777;
    cursor: pointer;
  }
  .option-drag {
    cursor: move;
  }
</style>